
import 'package:after_sale_plugin/r.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:lx_widgets_library/lx_widgets_library.dart';

class OrderProgressView extends StatelessWidget {
  // 工单进度状态
  final Rx<OrderProgressState> state;

  OrderProgressView({
    required this.state,
  }) {
    toDo(OrderProgressState s) {
      List<OrderProgressModel> temp = [];
      List<String> progressNums = ['0', '1', '2', '3'];
      for (var i = 0; i < progressNums.length; i++) {
        temp.add(OrderProgressModel()
          ..state = s
          ..num = progressNums[i]);
      }
      orderProgressModels.value = temp;
    }

    toDo(state.value);
    state.listen((p0) {
      toDo(p0);
    });
  }

  // 数据源
  RxList<OrderProgressModel> orderProgressModels = <OrderProgressModel>[].obs;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(
        left: CONTENT_MARGIN,
        right: CONTENT_MARGIN,
        top: CONTENT_MARGIN,
        bottom: CONTENT_MARGIN / 2,
      ),
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(8)),
        child: Container(
          height: 106,
          color: LxColors.borderBackgroud,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 8, left: 16),
                child: LxText(
                  AppLanguageUtil.to.titleCurrentState,
                  color: Colors.white.withOpacity(0.6),
                  fontWeightEnum: LxFontWeightEnum.bodyMedium,
                ),
              ),
              Obx(
                () => Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: orderProgressModels
                      .map((e) => getOrderStateText(e))
                      .toList(),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  //
  Container getOrderStateText(OrderProgressModel model) {
    return Container(
        color: Colors.transparent,
        width: (Get.width - 2 * CONTENT_MARGIN) / 4,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: 1,
                  width: 20,
                  color: model.leftLineColor,
                ),
                ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(11)),
                  child: Container(
                    height: 22,
                    width: 22,
                    color: model.isHighlightState
                        ? LxColors.theme
                        : const Color(0xFF2B2B2B),
                    child: Center(
                      child: model.isHighlightState
                          ? model.isSelfState
                              ? LxText(
                                  "${int.parse(model.num) + 1}",
                                  color: Colors.white,
                                  fontWeightEnum: LxFontWeightEnum.bodyMedium,
                                )
                              : Image.asset(
                                  R.selected_white_png,
                                  package: PACKAGE_NAME,
                                  width: 17,
                                  fit: BoxFit.fitWidth,
                                )
                          : LxText(
                              "${int.parse(model.num) + 1}",
                              color: model.isHighlightState
                                  ? LxColors.theme
                                  : Colors.white.withOpacity(0.6),
                              fontWeightEnum: LxFontWeightEnum.bodyMedium,
                            ),
                    ),
                  ),
                ),
                Container(
                  height: 1,
                  width: 20,
                  color: model.rightLineColor,
                )
              ],
            ),
            const SizedBox(height: 10),
            LxText(
              model.title,
              color: model.isHighlightState
                  ? LxColors.theme
                  : Colors.white.withOpacity(0.6),
              fontWeightEnum: LxFontWeightEnum.bodyMedium,
            ),
          ],
        ));
  }
}

class OrderProgressModel {
  // 工单进度
  OrderProgressState state = OrderProgressState.submited;

  // 状态文本
  String get title {
    switch (num) {
      case '0':
        return AppLanguageUtil.to.titleSubmitedOrderState;
      case '1':
        return AppLanguageUtil.to.titleInProgressOrderState;
      case '2':
        return AppLanguageUtil.to.titleCompletedOrderState;
      case '3':
        return AppLanguageUtil.to.titleClosedOrderState;
      default:
        return '';
    }
  }

  // 状态是自己
  bool get isSelfState =>
      state == OrderProgressState.getTypeByNum(int.parse(num));

  // 编号
  String num = '';

  // 状态是否高亮
  bool get isHighlightState => state.rawValue >= int.parse(num);

  // 是否显示左边line
  bool get showLeftLine => int.parse(num) != 0;

  // 左边line颜色
  Color get leftLineColor {
    if (int.parse(num) == 0) {
      return Colors.transparent;
    } else {
      if (isHighlightState) {
        return LxColors.theme;
      } else {
        return const Color(0xFF2B2B2B);
      }
    }
  }

  // 是否显示左边line
  bool get showRightLine => int.parse(num) != 3;

  // 右边line颜色
  Color get rightLineColor {
    if (int.parse(num) == 3) {
      return Colors.transparent;
    } else {
      if (state.rawValue > int.parse(num)) {
        return LxColors.theme;
      } else {
        return const Color(0xFF2B2B2B);
      }
    }
  }
}
